<script setup>
import { ref } from "vue";

import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue";
import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue";
import leftIcon from "@/assets/img/assets/left.png";
import rightIcon from "@/assets/img/assets/right.png";
import { assetlist } from "@/api/tires";
let arrAll = ref([]);
let assetPicArr = ref([]);
assetlist({ pageNum: 1, pageSize: 10, bigType: "GALLERY" }).then((res) => {
    let result = [];
    arrAll.value = [];
    res.data.records.forEach((item) => {
        if (item.assetPic) {
            result = item.assetPic.split(",");
            assetPicArr.value = result;
        }
    });
    for (var i = 0; i < result.length; i += 14) {
        arrAll.value.push(result.slice(i, i + 14));
    }
});
let imageIndex = ref(0);
const preview = (index, order) => {
    imageIndex.value = index * 14 + order;
};
const lastImg = () => {
    if (imageIndex.value > 0) imageIndex.value--;
};
const nextImg = () => {
    if (imageIndex.value < assetPicArr.value.length) imageIndex.value++;
};
</script>
<template>
    <div class="container text-center" v-for="(arr, index) in arrAll" :key="index">
        <div class="row mb-4">
            <div class="col-lg-12">
                <img class="img-fluid show-pointer" style="width: 100%" :src="arr[0]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 0)" />
            </div>
        </div>

        <div class="row">
            <div class="col-lg-3 mb-4" height="100%">
                <img class="img-fluid show-pointer" :src="arr[1]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 1)" />
            </div>
            <div class="col-lg-3 mb-4">
                <img class="img-fluid show-pointer" :src="arr[2]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 2)" />
            </div>
            <div class="col-lg-3 mb-4">
                <img class="img-fluid show-pointer" :src="arr[3]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 3)" />
            </div>
            <div class="col-lg-3 mb-4">
                <img class="img-fluid show-pointer" :src="arr[4]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 4)" />
            </div>
            <div class="col-lg-3 mb-4">
                <img class="img-fluid show-pointer" :src="arr[5]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 5)" />
            </div>
            <div class="col-lg-3 mb-4">
                <img class="img-fluid show-pointer" :src="arr[6]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 6)" />
            </div>
            <div class="col-lg-3 mb-4">
                <img class="img-fluid show-pointer" :src="arr[7]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 7)" />
            </div>
            <div class="col-lg-3 mb-4">
                <img class="img-fluid show-pointer" :src="arr[8]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 8)" />
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 mb-4">
                <img class="img-fluid show-pointer" :src="arr[9]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 9)" />
            </div>
            <div class="col-lg-6 mb-4">
                <div class="row">
                    <div class="col-lg-6 mb-4">
                        <img class="img-fluid show-pointer" :src="arr[10]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 10)" />
                    </div>
                    <div class="col-lg-6 mb-4">
                        <img class="img-fluid show-pointer" :src="arr[11]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 11)" />
                    </div>
                    <div class="col-lg-6 mb-4">
                        <img class="img-fluid show-pointer" :src="arr[12]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 12)" />
                    </div>
                    <div class="col-lg-6 mb-4">
                        <img class="img-fluid show-pointer" :src="arr[13]" alt="" data-bs-toggle="modal" data-bs-target=".my-modal" @click="preview(index, 13)" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade modal-xl my-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- <div class="modal-header">
                    <h5 class="modal-title text-f-ERASBD" id="exampleModalLabel">Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div> -->
                <div class="modal-body" style="display: flex; justify-content: space-around; align-items: center; height: 500px">
                    <img class="show-pointer" :src="leftIcon" width="20" alt="" @click="lastImg" />
                    <div style="width: 800px; display: flex; justify-content: center; align-items: center">
                        <img v-if="imageIndex < assetPicArr.length" class="img-fluid" :src="assetPicArr[imageIndex]" alt="" />
                        <span v-else>It's already the last one</span>
                    </div>

                    <img class="show-pointer" :src="rightIcon" width="20" alt="" @click="nextImg" />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.desc {
    background: #efefef;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;
}
</style>
